<template>
  <div>
    <div id="span1" @click.self="dj()">
      <div id="span2" @click="dj2()"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    dj() {
      console.info("111");
    },
    dj2() {
      console.info("222");
    }
  }
};
</script>

<style scoped>
#span1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
}
#span2 {
  width: 50px;
  height: 50px;
  border: 1px solid red;
  transform: translate(50%, 50%);
}
</style>
